Feat/AN-4135 pass query parameters to components #74

MGJamJam · 2024-06-05T12:28:57Z

Issue: https://bitmovin.atlassian.net/browse/AN-4135

Svarozic · 2024-06-06T13:08:30Z

bitmovin-analytics-datasource/src/components/FilterInput.tsx


 type Props = {
  readonly isAdAnalytics: boolean;
+  readonly filter: FilterRowData;
  readonly selectableFilterAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
  readonly onAttributeChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
  readonly onOperatorChange: (newValue: SelectableValue<QueryFilterOperator>) => void;
  readonly onValueChange: (newValue: string) => void;
  readonly onDelete: () => void;
  readonly addFilterDisabled: boolean;


this should be resp. of this component based on input prop filter

Svarozic · 2024-06-06T13:23:58Z

bitmovin-analytics-datasource/src/components/FilterRow.tsx

    } catch (e: unknown) {
      if (e instanceof Error) {
        const errorMessage = e.message;
-        const newFilter = { ...filter, parsingValueError: errorMessage } as Filter;
+        const newFilter = { ...filter, parsingValueError: errorMessage } as FilterRowData;


remove not necessary castings like this as FilterRowData.

use instead const newFilter: FilterRowData = { ...filter, ......

Svarozic · 2024-06-06T13:25:23Z

bitmovin-analytics-datasource/src/components/FilterRow.tsx

-    const newFilters = [...filters];
+    const filter = props.filters[index];
+    const newFilter = { ...filter, attribute: newAttribute.value } as FilterRowData;
+    const newFilters = [...props.filters];
    newFilters.splice(index, 1, newFilter);


maybe lodash has something more human readable instead of .splice(index, 1, newFilter);

Svarozic · 2024-06-06T13:27:06Z

bitmovin-analytics-datasource/src/components/GroupByInput.tsx

@@ -26,7 +26,7 @@ export function GroupByInput(props: Props) {
    <HorizontalGroup>
      <Select
        value={isEmpty(props.groupBy) ? undefined : props.groupBy}
-        onChange={props.onChange}
+        onChange={(value) => props.onChange(value.value!)}


Suggested change

onChange={(value) => props.onChange(value.value!)}

onChange={(selectableValue) => props.onChange(selectableValue.value!)}

and on another places same

Svarozic · 2024-06-06T13:35:56Z

bitmovin-analytics-datasource/src/components/QueryEditor.tsx

@@ -46,6 +58,19 @@ export function QueryEditor(props: Props) {
      });
  }, [props.datasource.apiKey, props.datasource.baseUrl]);

+  useEffect(() => {


always comment useEffect at least with one sentence

Svarozic · 2024-06-06T13:38:19Z

bitmovin-analytics-datasource/src/types/aggregations.ts

@@ -1,6 +1,8 @@
+import { SelectableValue } from '@grafana/data';


Suggested change

import { SelectableValue } from '@grafana/data';

import type { SelectableValue } from '@grafana/data';

Svarozic · 2024-06-06T13:39:03Z

bitmovin-analytics-datasource/src/utils/filterUtils.ts

@@ -4,6 +4,16 @@ import { QUERY_AD_ATTRIBUTES, QueryAdAttribute } from '../types/queryAdAttribute
 import { QUERY_FILTER_OPERATORS, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
 import { QUERY_ATTRIBUTES, QueryAttribute } from '../types/queryAttributes';

+export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue) => {


Suggested change

export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue) => {

export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue): string => {

…al state

* add new plugin template with create-plugin * implement ConfigEditor * use config props in the datasource * fix wrong value for tenantOrgId * make Input required * add Bitmovin logo * implements the testDatasource method * add useEffect to automatically set the url * adds comment for useEffect * improves ErrorMessage * implements the query method with DataFrame transformation * extracts data transforming into own functions and improves code readability * extracts data transformation of table data and simple time series data into own functions * improves java doc and comments * adds unit tests for dataUtils and adds error and edge case handling * changes query parameter * trigger tests on every branch push * Revert "trigger tests on every branch push" This reverts commit c03c5b2. * implements PR feedback * lint * extract groupedTimeSeriesTimestamps with zip instead of map to align code * simplify QueryInterval type and move it to intervalUtils file * delete unused QueriIntervals * Feat/AN-4043 setup ci on every push (#62) * trigger ci pipeline on every push * move github folder to root folder * Run go to grafana folder action as first action * add default working directory * add directory to uses option * try sparse-checkout option * try path option * try path option for node setup * add default working-directory * use sparse-checkout with cone-mode false * use sparse-checkout with cone-mode false * adds github ref * list repository structure * add default repository * delete list structure * add go to folder * delete go to folder * add cache dependency path * update docker-compose.yaml * Add TODOs * fixes is_compatible workflow * deletes partial repo checkout * deletes partial repo checkout * fix linting * Feat/AN-4041 implement license and interval selection (#64) * implements license fetching and interval selection * add tests for intervalUtils * fix ceiling of timestamp for DAY interval * add tests * fix linting * delete unnecessary export of enum * rename MyQuery to BitmovinAnalyticsDataQuery * add AnalyticsLicenseType * Feat/AN-4106 implement aggregation selection (#65) * implements license fetching and interval selection * add tests for intervalUtils * fix ceiling of timestamp for DAY interval * add tests * fix linting * delete unnecessary export of enum * implement metric selection * Feat/AN-4107 implement dimension selection (#66) * implement dimension selection * fix linting errors * add metric support * add metric to query and check for null instead of undefined * fix merge commit * Feat/AN-4110 implement group by selection (#68) * implements license fetching and interval selection * add tests for intervalUtils * fix ceiling of timestamp for DAY interval * add tests * fix linting * delete unnecessary export of enum * implement metric selection * implement dimension selection * fix linting errors * add metric support * add metric to query and check for null instead of undefined * implements groupBy selection * fix linting * implements reordering of GroupBys and fixes position of Add Button * make props readonly * Feat/AN-4112 implement order by selection (#69) * implements license fetching and interval selection * add tests for intervalUtils * fix ceiling of timestamp for DAY interval * add tests * fix linting * delete unnecessary export of enum * implement metric selection * implement dimension selection * fix linting errors * add metric support * add metric to query and check for null instead of undefined * implements groupBy selection * fix linting * implements reordering of GroupBys and fixes position of Add Button * make props readonly * implements order By selection * splits orderBy state into two seperate states to fix rendering and renames variables * lint * Feat/AN-4111 implement filter selection (#70) * add queryFilter type and renames AnalyticsDataQuery and AnalyticsRequestQuery type * implements filter selection * implements labels for filter selection fields * corrects wrong label for add order by and filter selection * corrects wrong label for delete tooltip * add AddFilter button and Filter validation * lint * do not set value if value isEmpty for GroupBy and OrderBy Input * fix deleteFilterInput to use the converted values instead of rawValues * deletes reordering of FilterInputs * refactors FilterRow to use one Filter object as local state * add tests for filterUtils * implement PR Feedback * Feat/AN-4118 implement limit selection (#71) * add limit selection * add radix parameter for parseInt function * lint * Feat/AN-4121 implement aliasby selection (#72) * implement alias By selection * rename onChange Methods to handle... * add Default values for query editor (#73) * move and rename typings * improve code readability * Feat/AN-4135 pass query parameters to components (#74) * make GroupByRow controlled * make OrderByRow controlled * make FilterByRow controlled * make simple selection controlled * fix groupBy types * fix interval default value bug * rename filterRow prop * delete TODOs * split useEffect and useMemo for isMetricSelected * lint * refactor FilterRow and QueryEditor to hold UI related Row data as local state * implement PR feedback * add unit tests for mapQueryFilterValueToRawFilterValue * Feat/AN-4127 update readme (#75) * make GroupByRow controlled * make OrderByRow controlled * make FilterByRow controlled * make simple selection controlled * fix groupBy types * fix interval default value bug * rename filterRow prop * delete TODOs * split useEffect and useMemo for isMetricSelected * lint * update Readme * delete TODOS and add example_dashboard * reorders sections * set defaultValue and not value top be able to change the limit and alisBy field * Add Warning QueryResultMetaNotice to data frame produced by datasource.ts, when rowCount is higher/equal 200 * feature/AN-3212/AN-4161_change-the-add-filter-icon-in-query-editor (#77) * Rewrite FilterInput.tsx to QueryFilterInput.tsx - remove label arg from util convertFilterForAds, convertFilter, because we dont need that dep there * - remove obsolete `disable` prop * add Tooltips for QueryFilterInputSelects --------- Co-authored-by: MGJamJam <[email protected]> * Replace enums with const array of string (aggregations, metrics, query (ad) attributes, query filter operators) (#79) * Feat/AN-4128 make new data query compatible with old example dashboard json (#78) * adapt license, metric, dimension, filter and alias to work with old query type * add migration for filters and table/timeseries options * lint * lint * add type predicates for OldBitmovinAnalyticsDataQuery * implement percentile input * renames percentile to percentileValue * separates metric, query aggregations and query attributes * change metric values to lower case * makes filter, dimension, metric and limit compatible with old JSON * rename QueryFilter types * Feat/AN-4160 update example dashboard (#80) * delete filtering of attributes for already used attributes and add error_code to null filter * update example_dashboard * delete files related to angular plugin * move files to root folder and delete subfolder * add dist folder * change gitignore to exclude dist folder * add dist folder to eslint ignore pattern * Fix/AN-4193 fix missing tenant id request header (#81) * add tenant orf id to request header * implement PR feedback * fmt * make plugin compatible with grafana v10.2.0 * make plugin compatible with grafana v10.1.0 * rename adAnalytics to isAdAnalytics * update License * update License * filter incomplete Queries * update changelog * delete datasource details in example_dashboard * update plugin description and README --------- Co-authored-by: Peter Petraník <[email protected]>

MGJamJam added 8 commits May 20, 2024 17:02

make GroupByRow controlled

2b6ab59

make OrderByRow controlled

9f077d5

make FilterByRow controlled

4da3886

make simple selection controlled

58cc290

fix groupBy types

021267e

fix interval default value bug

39193ad

rename filterRow prop

72d1ebd

delete TODOs

26d00ad

MGJamJam requested a review from Svarozic June 6, 2024 10:11

MGJamJam added 2 commits June 6, 2024 08:07

split useEffect and useMemo for isMetricSelected

dc691b2

lint

684ac2c

Svarozic approved these changes Jun 6, 2024

View reviewed changes

MGJamJam added 3 commits June 7, 2024 11:35

refactor FilterRow and QueryEditor to hold UI related Row data as loc…

d7a8163

…al state

implement PR feedback

70a7b02

add unit tests for mapQueryFilterValueToRawFilterValue

0860684

MGJamJam merged commit e63d6dc into migrate-to-react Jun 7, 2024
3 checks passed

MGJamJam deleted the feat/AN-4135_pass-query-parameters-to-components branch June 7, 2024 14:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/AN-4135 pass query parameters to components #74

Feat/AN-4135 pass query parameters to components #74

MGJamJam commented Jun 5, 2024

Svarozic Jun 6, 2024

Svarozic Jun 6, 2024

Svarozic Jun 6, 2024

Svarozic Jun 6, 2024

Svarozic Jun 6, 2024

Svarozic Jun 6, 2024

Svarozic Jun 6, 2024

	onChange={(value) => props.onChange(value.value!)}
	onChange={(selectableValue) => props.onChange(selectableValue.value!)}

		@@ -1,6 +1,8 @@
		import { SelectableValue } from '@grafana/data';

	import { SelectableValue } from '@grafana/data';
	import type { SelectableValue } from '@grafana/data';

	export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue) => {
	export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue): string => {

Feat/AN-4135 pass query parameters to components #74

Feat/AN-4135 pass query parameters to components #74

Conversation

MGJamJam commented Jun 5, 2024

Svarozic Jun 6, 2024

Choose a reason for hiding this comment

Svarozic Jun 6, 2024

Choose a reason for hiding this comment

Svarozic Jun 6, 2024

Choose a reason for hiding this comment

Svarozic Jun 6, 2024

Choose a reason for hiding this comment

Svarozic Jun 6, 2024

Choose a reason for hiding this comment

Svarozic Jun 6, 2024

Choose a reason for hiding this comment

Svarozic Jun 6, 2024

Choose a reason for hiding this comment